<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            条件渲染 : v-if / v-show
            分别在什么场景下使用什么指令?

            如果是需要频繁的操作的时候 ,建议使用v-show (例如:选项卡 ,标签页 ...)
            操作次数仅是一次或极少次,建议使用v-if 

        -->
        <!-- 
            使用v-show 指令 : 指令的参数可以是一个布尔值 : false(隐藏) ,true(显示) 

            控制元素的隐藏和显示 : 通过 display: none; 实现隐藏和显示控制
         -->
        <!-- <div class="box" v-show="false"></div> -->

        <!-- 
            使用v-if 指令: 指令的参数可以是一个布尔值 : false(隐藏) ,true(显示) 
            控制元素的隐藏和显示 : 通过元素的插入和删除来控制
        -->
        <div class="box" v-if="false"></div>
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据

            },
            methods:{//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>
</html>